import React from 'react'
import { Flex } from 'antd-mobile'
import styles from './index.module.scss'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router-dom'
import classNames from 'classnames'

class SearchHeader extends React.Component {
  static propTypes = {
    cityName: PropTypes.string.isRequired,
  }
  render() {
    // 如果props传值中, 传递了className, 自己封装组件时, 是需要手动拼接的
    // console.log(this.props.className)
    // console.log(this.props.style)
    const { className, style, history, cityName } = this.props
    return (
      <Flex
        className={classNames(styles['search-box'], className)}
        style={style}
      >
        <Flex className="search-form">
          <div className="location" onClick={() => history.push('/city')}>
            <span className="name">{cityName}</span>
            <i className="iconfont icon-arrow"> </i>
          </div>

          <div className="search-input">
            <i className="iconfont icon-seach" />
            <span className="text">请输入小区地址</span>
          </div>
        </Flex>
        {/* 地图小图标 */}
        <i
          className="iconfont icon-map"
          onClick={() => this.props.history.push('/map')}
        />
      </Flex>
    )
  }
}

export default withRouter(SearchHeader)
